<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard 3</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- 李磊的css -->
  <link rel="stylesheet" href="lilei.css">
  <!-- 引入ElementUi的css -->
  <link rel="stylesheet" href="plugins/elementUI/index.css">


</head>
<!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->

<body class="hold-transition sidebar-mini">
  <div id="app" class="wrapper">
    <!-- Content Header (Page header) -->
    <nav class="navbar navbar-expand navbar-white navbar-light">
      <ul class="nav nav-tabs">
        <li id="system1" class="dropdown" style="display: none;"><a data-toggle="dropdown" href="#"
            style="color: black; font-size: 20px;"> 用户管理 </a>
        </li>
        <li id="system2" class="dropdown" style="display: none;"><a data-toggle="dropdown" href="#"
            style="color: black; font-size: 20px;"> 角色管理 </a>
        </li>
        <li id="system3" class="dropdown" style="display: none;"><a data-toggle="dropdown" href="#"
            style="color: black; font-size: 20px;"> 仓库管理 </a>
        </li>
        <li id="system4" class="dropdown" style="display: none;"><a data-toggle="dropdown" href="#"
            style="color: black; font-size: 20px;"> 导出任务 </a>
        </li>
      </ul>

    </nav>
    <script type="text/javascript">
      function system() {
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";

      }
      function system1() {
        document.getElementById("system1").style.display = "";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";
        document.getElementById("usercontrol").style.display = "";
      }
      function system2() {
        document.getElementById("system2").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";
      }
      function system3() {
        document.getElementById("system3").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system4").style.display = "none";
      }
      function system4() {
        document.getElementById("system4").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
      }
    </script>

    <!-- ---------------------局部刷新-------------------------- -->
    <div class="content-header">
      <div id="usercontrol" style="display: '';">
        <div class="row" style="height: 50px;">
          <div class="col-md-2">
            <button id="useradd" class="btn btn-block btn-primary"
              onclick="document.getElementById('addrolediv').style.display='block';" style="height: 40px;">新增租户</button>
            <!-- 弹出新增角色对话框 -->


            <!-- ------------------------------------------------ -->
          </div>
          <div class="col-md-3"></div>
          <div class="col-md-7">
            <div class="btn-group">
              <div class="btn-group" style="margin: 10px;width: 200px;height: 30px;">
                <button type="button" class="btn btn-default" v-on:click="all()"
                  style="line-height: 14px;font-size: 14px;">全部</button>
                <button type="button" class="btn btn-default" v-on:click="on()"
                  style="line-height: 14px;font-size: 14px;">启用</button>
                <button type="button" class="btn btn-default" v-on:click="off()"
                  style="line-height: 14px;font-size: 14px;">禁用</button>
              </div>
              <div class="input-group" style="margin: 5px;width: 380px;">
                <input id="search" type="text" class="form-control" v-model="searchwords" placeholder="请输入企业名或者企业代码关键字">
                <span class="input-group-btn">
                  <button v-on:click="search()" class="btn btn-block btn-primary">
                    搜索
                  </button>
                </span>

                <i class="nav-icon fas fa-undo" v-on:click="all()" style="margin: 10px;"></i>

              </div>

            </div>

          </div>
        </div>

        <div class="row" style="text-align: center;">
          <table class="table table-condensed" style="border-bottom: 1px solid rgb(216, 216, 216);;">
            <caption></caption>
            <thead>
              <tr>
                <th>操作</th>
                <th>企业名称</th>
                <th>企业信用代码</th>
                <th>企业类型</th>
                <th>联系人</th>
                <th>联系电话</th>
                <th>状态</th>
                <th>到期日期</th>

              </tr>
            </thead>
            <tbody>
              <!-- <tr>
                <td>
                    <i class="nav-icon fas fa-search" style="margin: 5px;margin-left: 10px;"></i>
                    <span class="partition1"></span>
                    <i class="nav-icon fas fa-edit " style="margin: 5px;margin-left: 10px;"></i>
                    <span class="partition1"></span>
                    <i class="nav-icon fas fa-key" style="margin: 5px;margin-left: 10px;"></i>
                </td>
                <td> 老凤祥深圳总店</td>
                <td>91210000117562066G</td>
                <td> 总店</td>
                <td> 张哥</td>
                <td> 13912341234</td>
                <td> 启用</td>
                <td> 2030-02-01 08:12:10</td>
              </tr> -->
              <tr v-for="(lessee,key) in lessees">
                <td>
                  <i class="nav-icon fas fa-search" style="margin: 5px;margin-left: 10px;"></i>
                  <span class="partition1"></span>
                  <i class="nav-icon fas fa-edit " style="margin: 5px;margin-left: 10px;"></i>
                  <span class="partition1"></span>
                  <i class="nav-icon fas fa-trash" v-on:click="del(lessee.lid)"
                    style="margin: 5px;margin-left: 10px;color: red;"></i>
                </td>
                <td>{{lessee.lname}}</td>
                <td>{{lessee.lcode}}</td>
                <td>{{lessee.category}}</td>
                <td>
                  {{lessee.linkman}}
                </td>
                <td>{{lessee.phone}}</td>
                <td>{{lessee.status}}</td>
                <td>{{lessee.etime}}</td>
              </tr>




            </tbody>
          </table>
          <div class="block" style="margin-top: -20px;">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage4" background :page-sizes="[12]" :page-size="12"
              layout="total, prev, pager, next, sizes, jumper" :total="1342">
            </el-pagination>
          </div>

        </div>


      </div>

    </div>
    <!-- 新增角色弹窗 -->
    <div id="addrolediv">
      <div style="height: 40px;border-bottom:1px solid rgb(233, 233, 233);">
        <div style="width: 50px;margin-left: 30px;margin-top: 20px;">
          <p style="font-size: 15px;color: rgb(82, 82, 82);"><b>角色</b></p>
        </div>
        <div style="margin-left: 750px;margin-top: -40px;">
          <button class="btn btn-default" onclick="document.getElementById('addrolediv').style.display='none';"
            style="height: 30px;line-height: 10px;">x</button>
        </div>
      </div>
      <div style="border-bottom:1px solid rgb(233, 233, 233);">
        <div style="margin-top: 15px;margin-bottom: 20px;">
          <span style="margin-left: 100px;">角色名称：</span>
          <input type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
        </div>
        <div style="margin-top: 15px;margin-bottom: 20px;">
          <span style="margin-left: 100px;">角色编码：</span>
          <input type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
        </div>

        <div style="margin-top: 10px;margin-bottom: 10px;">
          <span style="margin-left: 100px;">状态：</span>
          <span style="margin-right:70px">
            <input type="radio" name="status" value="启用" style="margin-right:5px">
            启用
          </span>
          <span>
            <input type="radio" name="status" value="禁用" style="margin-right:5px">
            禁用
          </span>
        </div>

        <div style="margin-top: 10px;margin-bottom: 10px;">
          <span style="margin-left: 100px;">菜单权限：</span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            分称管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            调拨管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            物料管理
          </span><br>

          <span style="margin-left:183px;margin-right: 5px;">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            物料分类
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            销售管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            财务管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            货品转换
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            基础数据
          </span><br>

          <span style="margin-left:183px;margin-right: 21px;">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库单
          </span>
          <span style="margin-right:21px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库单
          </span>
          <span style="margin-right:21px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            选货单
          </span>
          <span style="margin-right:21px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            打保单
          </span>
          <span style="margin-right:21px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            采购单
          </span><br>
        </div>

        <div style="margin-top: 10px;margin-bottom: 10px;">
          <span style="margin-left: 100px;">品类权限：</span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            黄金
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            钻石
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            玛瑙
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            翡翠
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            铂金
          </span><br>

          <span style="margin-left:183px;margin-right: 5px;">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            项链
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            戒指
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            手镯
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            耳环
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            鼻环
          </span><br>
        </div>

        <div style="margin-top: 10px;margin-bottom: 10px;">
          <span style="margin-left: 100px;">功能权限：</span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库新增
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库审核
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库反审
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库导出
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            新增分称
          </span><br>

          <span style="margin-left:183px;margin-right: 5px;">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库新增
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库审核
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库反审
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库到处
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            新增调拨
          </span><br>

        </div>

      </div>
      <div>
        <div style="margin-left: 600px;margin-top:15px">
          <button class="btn btn-default" onclick="document.getElementById('addrolediv').style.display='none';"
            style="width: 70px;height: 30px;line-height: 10px;">确认</button>
          <button class="btn btn-default" onclick="document.getElementById('addrolediv').style.display='none';"
            style="width: 70px;height: 30px;line-height: 10px;">取消</button>
        </div>
      </div>
    </div>

    <script>


    </script>
  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED SCRIPTS -->

  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE -->
  <script src="dist/js/adminlte.js"></script>

  <!-- OPTIONAL SCRIPTS -->
  <script src="plugins/chart.js/Chart.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="dist/js/pages/dashboard3.js"></script>
  <!-- 引入VUE -->
  <script src="plugins/vue-2.6.10/vue-resource.min.js"></script>
  <script src="plugins/vue-2.6.10/vue.js"></script>
  <!-- 引入axios -->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <!--引入ElementUi-->
  <script src="plugins/elementUI/index.js"></script>
  <script>
    $(function () {
      var wer = new Vue({
        el: "#app",
        data() {
          return {
            value: true,
            currentPage4: 100,
            lessees: [],
            searchwords: "",
          }
        },
        //发送请求查询所有角色信息
        mounted() {
          axios
            .get('lessee/all')
            .then(res => {
              console.info(res.data);
              this.lessees = res.data;
            })
        },


        methods: {
          //分页
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          },
          //全部
          all: function () {
            axios
              .get('lessee/all')
              .then(res => {
                console.info(res.data);
                this.lessees = res.data;
              })
          },
          //启用
          on: function () {
            axios
              .get('lessee/findbystatus?status=1')
              .then(res => {
                console.info(res.data.data);
                this.lessees = res.data.data;
              })
          },
          //禁用
          off() {
            axios
              .get('lessee/findbystatus?status=0')
              .then(res => {
                console.info(res.data.data);
                this.lessees = res.data.data;
              })
          },
          //模糊搜索
          search() {
            axios
              .get('lessee/findbywords?words=' + this.searchwords)
              .then(res => {
                console.info(res.data.data);
                this.lessees = res.data.data;
              })
          },
          //删除
          del(lid) {
            axios
              .get('lessee/delbylid?lid=' + lid)
              .then(res => {
                alert('删除租户成功');
                console.info(res.data.data)
                this.lessees = res.data.data;
              })
          }


        }
      });
    })
  </script>
</body>

</html>